<style lang="scss">
.item-card-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    border-radius: 5px;
    box-shadow: 0 0 20px #A8A8A8;
    margin: 10px 0;
}

.img-container {
    width: 35%;
    border-radius: 5px;
    padding: 5px 0;
    img {
        width: 100%;
        border-radius: 5px;
    }
}

.detail-container {
    width: 60%;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 5px;
    .item-title {
        font-size: 1.5rem;
        font-weight: 600;
        .mall-icon {
            height: 2rem;
            width: 2rem;
        }
    }
    .sell-detail {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 5px;
        .ori-price {
            color: #FF6600;
            font-size: 1.6rem;
        }
    }
    .shop-name-bar {
        margin-top: 10px;
    }
}
</style>

<template>
    <div class="item-card-container">
        <div class="img-container" @click="checkItemDetail(itemInfo.itemId)">
            <img :src="itemInfo.itemPic"/>
        </div>
        <div class="detail-container">
            <div class="item-title">
                <span @click="checkItemDetail(itemInfo.itemId)">{{itemInfo.title}}</span>
            </div>
            
            <div class="sell-detail">
                <div class="ori-price">原价:￥{{itemInfo.itemPrice}}</div>
                <div class="ceil-num">销量:{{itemInfo.sellNum}}</div>
            </div>
            <div>
                <v-tag color="#f50" style="font-size: 1.8rem;">{{itemInfo.couponPriceNum}}</v-tag>
            </div>
            
            <div class="shop-name-bar">
                <v-tag color="orange-inverse" v-if="itemInfo.platformType=='淘宝'">淘宝</v-tag>
                <v-tag color="red-inverse" v-if="itemInfo.platformType=='天猫'">天猫</v-tag>
                {{itemInfo.shopName}}
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'jpItemCard',
    props: {
      itemInfo: {
        type: Object,
        default: () => ({})
      }
    },
    methods: {
        checkItemDetail: function(itemId) {
            this.$router.push({path: 'jpitem-detail', query: {item_id: itemId}})
        }
    }
}
</script>
